<template>
  <div class="register-wrapper">
    <div class="container">
      <!-- 表单区域 -->
      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules">
        <br><br>
        <h1 style="color: black; margin: 0; text-align: center; font-size: 2em; font-family: STXingkai">
          注册新用户
        </h1>
        <br />
        <el-form-item prop="username">
              <el-input v-model="addForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
              <el-input v-model="addForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="gender">
              <el-select v-model="addForm.gender" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
        </el-form-item>
        <el-form-item prop="email">
                <el-input v-model="addForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
         <el-form-item prop="birthday">
          <el-date-picker v-model="addForm.birthday" type="date" value-format="yyyy-MM-dd" placeholder="请选择出生日"></el-date-picker>
        </el-form-item>
        <el-form-item prop="avatar">
                <el-input v-model="addForm.avatar" placeholder="请输入头像"></el-input>
        </el-form-item>
        <el-form-item prop="mobile">
                <el-input v-model="addForm.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <div class="change_link" style="text-align: center">
          <span class="text">已经有账号了？</span>
          <span class="to_login" @click="toLogin">去登录</span>
        </div>

        <div class="btn">
          <el-button
            type="success"
            round
            class="register_btn"
            @click="register()"
            >注 册</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    // 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^[1][0-9]{10}$/
      if (regMobile.test(value)) {
        // 合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    // 邮箱验证码校验
    // var validateEamilCode = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请填写验证码'))
    //   } else if (value !== '' && Number(value) !== Number(this.checkCode)) {
    //     // console.log('value' + value)
    //     // console.log('checkcode' + this.checkCode)
    //     // console.log(value !== this.checkCode) // 这里是true，说明这两个是不同的实例，所以使用Number类型比较
    //     callback(new Error('验证码无效！'))
    //   }
    //   callback()
    // }

    return {
      // sendBtnTxt: '发送验证码', // 按钮显示内容
      msgBtnDisabled: false, // 按钮禁用状态
      timer: null, // 计时器
      countdown: 30, // 时间

      // 后台返回的有效验证码
      checkCode: '',
      // 注册表单
      addForm: {
        username: '',
        password: '',
        gender: '',
        avater: '',
        email: '',
        birthday: '',
        mobile: '',
        gmtCreate: '',
        code: ''
      },
      // 注册表单验证规则
      addFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请输入性别', trigger: 'change' }
        ],
        birthday: [
          { required: true, message: '请输入出生日期', trigger: 'change' }
        ]
        // code: [
        //   { required: true, message: '请填写邮箱验证码', trigger: 'change' },
        //   { validator: validateEamilCode, trigger: 'this.register()' }
        // ]
      }

    }
  },
  methods: {
    // 发送验证码
    // async sendCode () {
    //   var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
    //   if (this.addForm.email === '') return this.$message.warning('邮箱地址未填写！')
    //   if (this.addForm.username === '') return this.$message.warning('用户名未填写！')
    //   else if (this.addForm.email !== '' && !regEmail.test(this.addForm.email)) return false
    //   const { data: res } = await this.$http.post('/email/sendCode', { username: this.addForm.username, email: this.addForm.email })
    //   // console.log(res)
    //   if (res.code === -3) return this.$message.warning('邮箱已经注册过了！')
    //   else if (res.code === 200) {
    //     this.$message.success('发送验证码成功！')
    //     console.log('验证码：' + res.data.code) // 测试用来查看验证码
    //     this.$notify({
    //       title: '【个人博客系统】',
    //       message: `您的验证码：${res.data.code}，验证码十分钟内有效，请妥善保管`,
    //       type: 'success',
    //       duration: 0
    //     })
    //     // 赋值给checkCode,做预校验
    //     this.checkCode = res.data.code
    //     this.getCode()
    //   }
    // },
    // 发送验证码30秒倒计时
    // getCode () {
    //   // 倒计时
    //   if (!this.timer) {
    //     this.timer = setInterval(() => {
    //       if (this.countdown > 0 && this.countdown <= 30) {
    //         this.countdown--
    //         if (this.countdown !== 0) {
    //           this.sendBtnTxt = '重新发送(' + this.countdown + ')'
    //           this.msgBtnDisabled = true
    //         } else {
    //           clearInterval(this.timer)
    //           this.sendBtnTxt = '获取验证码'
    //           this.countdown = 30
    //           this.timer = null
    //           this.msgBtnDisabled = false
    //         }
    //       }
    //     }, 1000)
    //   }
    // },
    // 获取当前时间
    getCurrentTime() {
      var myDate = new Date()
      var year = myDate.getFullYear()
      var mon = myDate.getMonth() + 1
      var date = myDate.getDate()
      var hours = myDate.getHours()
      var minutes = myDate.getMinutes()
      var seconds = myDate.getSeconds()
      var now
      if (seconds < 10 && minutes < 10) {
      now = year + '-' + mon + '-' + date + ' ' + hours + ':0' + minutes + ':0' + seconds
      } else if (seconds < 10 && minutes > 10) {
        now = year + '-' + mon + '-' + date + ' ' + hours + ':' + minutes + ':0' + seconds
      } else if (seconds > 10 && minutes < 10) {
        now = year + '-' + mon + '-' + date + ' ' + hours + ':0' + minutes + ':' + seconds
      } else {
        now = year + '-' + mon + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds
      }
      return now
    },
    // 用户注册
    register () {
      this.addForm.gmtCreate = this.getCurrentTime()
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        const { data: res } = await this.$http.post('/user/add.do', this.addForm)
        // console.log('注册账号', res)
        if (res.flag !== true) return this.$message.warning('邮箱已经被注册！')
        this.$message.success('注册账号成功！')
        // 清空表单
        this.$refs.addFormRef.resetFields()
        setTimeout(() => {
          this.toLogin()
        }, 200)
      })
    },
    toLogin () {
      this.$router.push('/login')
    }

  }

}
</script>

<style lang="less" scoped>
body {
  margin: 0;
  padding: 0;
  font: 16px/20px microsft yahei;
}

.wrap {
  width: 100%;
  height: 100%;
  padding: 10% 0;
  position: fixed;
  opacity: 0.8;
  background: linear-gradient(to bottom right, #3ba7e6, #bae24d);
  background: -webkit-linear-gradient(to bottom right, #50a3a2, #53e3a6);
}
.container {
  // border:1px solid red;
  width: 60%;
  display: flex;
  justify-content: center;
  // border:1px solid black;

  .el-form {
    width: 70%;
    // border:1px solid red;
    padding: 0 15%;
    .el-form-item {
      padding: 0 5%;
    }

    opacity: 0.8;
    .el-form-item__content {
      padding: 0;
    }
    .btn {
      display: flex;
      justify-content: center;
      .register_btn {
        width: 90%;
        font-size: 1.1em;
      }
    }
  }
  h1 {
    text-align: center;
    color: #ffffff;
    font-weight: 500;
  }
}

@media only screen and (min-width: 100px) and (max-width: 1424px) {
  .container {
    width: 600px;
    height: 400px;
    .el-form {
      width: 500px;
    }
  }
}

.input {
  width: 60%;
}
.send {
  position: absolute;
  right: 0;
}

.change_link {
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
}

.to_login {
  color: rgb(79, 79, 230);
  cursor: pointer;
}
.to_login:hover {
  color: red;
}
.text {
  color: #e2dfe4;
}
.wrap ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -20;
}
.wrap ul li {
  list-style-type: none;
  display: block;
  position: absolute;
  bottom: -120px;
  width: 15px;
  height: 15px;
  z-index: -8;
  border-radius: 50%;
  box-shadow: inset -30px -30px 75px rgba(241, 186, 7, 0.2),
    inset 0px 0px 5px rgba(86, 236, 148, 0.5),
    inset -3px -3px 5px rgba(75, 207, 58, 0.5),
    0 0 20px rgba(255, 255, 255, 0.75);
  background-color: rgba(255, 255, 255, 0.15);
  animotion: square 25s infinite;
  -webkit-animation: square 25s infinite;
}
.wrap ul li:nth-child(1) {
  left: 0;
  animation-duration: 10s;
  -moz-animation-duration: 10s;
  -o-animation-duration: 10s;
  -webkit-animation-duration: 10s;
}
.wrap ul li:nth-child(2) {
  width: 40px;
  height: 40px;
  left: 10%;
  animation-duration: 15s;
  -moz-animation-duration: 15s;
  -o-animation-duration: 15s;
  -webkit-animation-duration: 11s;
}
.wrap ul li:nth-child(3) {
  left: 20%;
  width: 25px;
  height: 25px;
  animation-duration: 12s;
  -moz-animation-duration: 12s;
  -o-animation-duration: 12s;
  -webkit-animation-duration: 12s;
}
.wrap ul li:nth-child(4) {
  width: 50px;
  height: 50px;
  left: 30%;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
  animation-duration: 12s;
  -moz-animation-duration: 12s;
  -o-animation-duration: 12s;
  -webkit-animation-duration: 12s;
}
.wrap ul li:nth-child(5) {
  width: 60px;
  height: 60px;
  left: 40%;
  animation-duration: 10s;
  -moz-animation-duration: 10s;
  -o-animation-duration: 10s;
  -webkit-animation-duration: 10s;
}
.wrap ul li:nth-child(6) {
  width: 75px;
  height: 75px;
  left: 50%;
  -webkit-animation-delay: 7s;
  -moz-animation-delay: 7s;
  -o-animation-delay: 7s;
  animation-delay: 7s;
}
.wrap ul li:nth-child(7) {
  left: 60%;
  width: 30px;
  height: 30px;
  animation-duration: 8s;
  -moz-animation-duration: 8s;
  -o-animation-duration: 8s;
  -webkit-animation-duration: 8s;
}
.wrap ul li:nth-child(8) {
  width: 90px;
  height: 90px;
  left: 70%;
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
.wrap ul li:nth-child(9) {
  width: 50px;
  height: 50px;
  left: 80%;
  animation-duration: 20s;
  -moz-animation-duration: 20s;
  -o-animation-duration: 20s;
  -webkit-animation-duration: 20s;
}
.wrap ul li:nth-child(10) {
  width: 75px;
  height: 75px;
  left: 90%;
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
  animation-duration: 30s;
  -moz-animation-duration: 30s;
  -o-animation-duration: 30s;
  -webkit-animation-duration: 30s;
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    bottom: 400px;
    -webkit-transform: translateY(-500);
    transform: translateY(-500);
  }
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    bottom: 400px;
    -webkit-transform: translateY(-500);
    transform: translateY(-500);
  }
}
</style>
